<template>
    <Popup
        v-model="showValue"
        position="bottom"
        :class="`tech-shop-half-modal ${mode} ${styleMode}`"
        overlay-class="tech-shop-half-modal-overlay"
        :close-on-click-overlay="false"
    >
        <div class="half-modal-content">
            <!-- 顶部 -->
            <div :class="`half-modal-header ${haveBorder ? 'border-bottom' : ''}`">
                <div class="title title-color">{{title}}</div>
                <div class="close-action">
                    <MiniIcon name="close" :size="24" :mode="mode" :styleMode="styleMode" theme="#7D7D83" @click="close" />
                </div>
            </div>
            <div class="half-modal-body">
                <slot></slot>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup } from 'vant';
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'HalfModal', // 半屏弹框
    mixins: [ModeMixin],
    components: {
        Popup,
        MiniIcon,
    },
    props: {
        show: Boolean,
        title: {
            type: String,
            default: 'TechPopup',
        },
        haveClose: {
            type: Boolean,
            default: true,
        },
        haveBorder: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showValue: false,
            el: document.querySelector('body'),
        };
    },
    watch: {
        show (val) {
            this.showValue = val;
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="less">
.tech-shop-half-modal {
    z-index: 2003 !important;
    box-sizing: border-box;
    overflow: hidden;
    height: 380px;
    height: calc(380px + constant(safe-area-inset-bottom));
    height: calc(380px + env(safe-area-inset-bottom));
    .style-mode-top();
    .mode-white();
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .mode-white();
    &.black {
        .half-modal-header {
            &.border-bottom {
                .shop-border-line(@black, 0, 0);
            }
        }
    }
    .half-modal-header {
        height: 52px;
        .flex();
        align-items: center;
        justify-content: space-between;
        .p-h(@shop-gap-md);
        .title {
            font-size: 19px;
            font-weight: 500;
            color: @text-color;
        }
        .close-action {
            opacity: .7;
        }
        &.border-bottom {
            .shop-border-line(@border-color, 0, 0);
        }
    }
    .half-modal-content {
        position: relative;
        height: 100%;
    }
}
.tech-shop-half-modal-overlay {
    z-index: 2002 !important;
}
</style>
